<template>
  <r-com
    :leftClass="'zb-left-height'"
    :rightClass="'zb-right-box'"
    :groupClass="'zb-group-height group-height'"
  >
    <template slot="top-bar">
      <li class="el-icon-s-promotion">正在直播</li>
      <li class="zhibo-num">当前有0个直播</li>
    </template>
    <template slot="video-slot">
      <a class="tg-vedio" href="#" v-for="item in zhiboList" :key="item._id">
        <!-- 需要放一个鼠标聚焦后 播放截图的img -->
        <div class="video-fm">
          <el-image :src="item.fmPath" lazy></el-image>
          <span class="video-num el-icon-user">33.6万</span>
          <div class="video-jt">
            <el-image :src="require('../../assets/banner.png')"></el-image>
          </div>
        </div>
        <div class="watch-info a-link">
          <el-image class="icon-image" :src="require('../../assets/icon.jpg')" lazy></el-image>
          <div class="info">
            <p class="up-name">{{item.title}}</p>
            <p class="up-sign">{{item.author}}</p>
            <p class="watch-type">单机游戏</p>
          </div>
        </div>
      </a>
    </template>
    <template slot="right-area">
      <el-tabs v-model="activeName">
        <el-tab-pane label="直播排行" name="first">
          <ul class="rank">
            <li>
              <a href="#" class="a-link" v-for="item in 6" :key="item">
                <div class="rank-face">
                  <span class="rank-span" :class="item>3?'rank-four':' '">{{item}}</span>
                  <el-image class="icon-image" :src="require('../../assets/icon.jpg')"></el-image>
                  <div class="txt">
                    <p>巴黎巴黎</p>
                    <p class="p2">读评论</p>
                  </div>
                  <div class="el-icon-user watch">533.2万</div>
                </div>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="关注的主播" name="second">
          <div class="watch-up">没有数据(-_-#)</div>
        </el-tab-pane>
        <el-tab-pane label="为你推荐" name="third" id="test">
          <el-carousel trigger="click" arrow="never" :autoplay="true" :interval="5000">
            <el-carousel-item v-for="item in 2" :key="item">
              <div>
                <el-image :src="require('../../assets/icon.jpg')"></el-image>
                <p class="text">我是你拔拔拔拔拔拔我是你拔拔拔拔拔拔</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-tab-pane>
      </el-tabs>
    </template>
  </r-com>
</template>
<script>
import Rc from '../common/RowComponent'
export default {
  data() {
    return {
      activeName: 'first',
      zhiboList: [],
    }
  },
  components: {
    'r-com': Rc,
  },
  async mounted() {
    this.zhiboList = await this.getData('/index/zhibo', 'fmPath')
    console.log(this.zhiboList)
  },
  methods: {
    async getData(address, pathName) {
      const { data: res } = await this.$http.get(address)
      res.forEach((item) => {
        const path = 'http://127.0.0.1:3030'
        item[pathName] = path + item[pathName]
      })
      return res
    },
  },
}
</script>
<style scoped>
.el-tabs__nav-prev {
  display: none !important;
}
.zhibo-num {
  font-size: 14px !important;
  color: #999;
  line-height: 30px !important;
  margin-left: 20px;
}
.video-name {
  display: inline-block;
  color: #000;
  width: 100%;
  font-size: 15px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  padding: 10px 0;
  padding-right: 2px;
}
.video-num {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  color: #fff;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
.video-num::before {
  font-size: 15px;
  margin-right: 5px;
}
.up {
  color: #888;
  transition: all 0.2s;
}
.online-list {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #f4f4f4;
  border: 1px solid #e7e7e7;
  text-align: center;
}
.right-box-img {
  margin-top: 20px;
  display: block;
  width: 100%;
  height: 184px;
  border: 1px solid #e7e7e7;
}
.right-box-img .el-image {
  width: 100%;
  height: 100%;
}
.icon-image {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  vertical-align: middle;
}
.rank-span {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: #49a5da;
  text-align: center;
  font-size: 14px;
  margin-right: 15px;
  margin-top: 10px;
}
.rank-four {
  background-color: transparent;
  color: #999;
}
.rank-face {
  padding-top: 10px;
  display: flex;
  height: 54px;
}
.txt {
  margin-left: 10px;
  font-size: 14px;
  flex: 1;
}
.p2 {
  font-size: 12px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
}
.p2:hover {
  color: #999;
}
.watch {
  font-size: 13px;
  color: #999;
}
.watch:hover {
  color: #999;
}
.watch::before {
  font-size: 16px;
}
.watch-up {
  text-align: center;
}
.watch-info {
  margin-top: 8px;
  color: #000;
  display: flex;
}
.info {
  margin-left: 5px;
  font-size: 14px;
}
.watch-info .icon-image {
  width: 36px;
  height: 36px;
}
.up-sign {
  margin-top: 2px;
  font-size: 12px;
  color: #999;
}
.watch-type {
  color: #999;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.el-carousel,
.el-carousel__item > div,
.el-carousel__item {
  width: 320px !important;
  height: 330px !important;
}
.video-jt {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
.video-jt .el-image {
  width: 100%;
  height: 100%;
}
.video-fm:hover .video-jt {
  display: block;
}
.el-carousel-item /deep/ div {
  position: relative;
}
.text {
  position: absolute;
  bottom: 10px;
  left: 30px;
  width: 230px;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (max-width: 1450px) {
  .tg-vedio:nth-child(5) {
    margin-left: 0 !important;
  }
  .tg-vedio:nth-child(7) {
    margin-left: 10px !important;
  }
}
</style>
